<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><Ifr></Ifr>投E行 - 投资行为诊断与纠正平台</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="favicon.ico" rel="icon">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h1><span><strong>❤️投E行</strong></span></h1>
                <span>投资行为诊断与纠正平台</span>
            </div>
            <div class="nav-menu">
                <a href="index.html" class="nav-link active">首页</a>
                <a href="#features" class="nav-link">功能特色</a>
                <a href="#about" class="nav-link">关于我们</a>
                <div class="nav-auth">
                    <button id="loginBtn" class="btn btn-outline">登录</button>
                    <button id="registerBtn" class="btn btn-primary">注册</button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <h1 class="hero-title">识别投资行为偏差，提升投资决策质量</h1>
                <p class="hero-description">
                    I投E行是面向个体投资者的行为诊断与纠正工具，通过算法识别您的交易行为模式，
                    诊断可能存在的认知偏差，并提供个性化的"理性提示"和投资教育。
                </p>
                <div class="hero-actions">
                    <button id="heroRegisterBtn" class="btn btn-primary btn-large">立即体验</button>
                    <button id="heroLearnMoreBtn" class="btn btn-outline btn-large">了解更多</button>
                </div>
            </div>
            <div class="hero-visual">
                <div class="visual-card">
                    <div class="card-header">
                        <h3>行为偏差分析示例</h3>
                    </div>
                    <div class="card-content">
                        <canvas id="demoRadarChart" width="300" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能介绍 -->
    <section id="features" class="features">
        <div class="container">
            <h2 class="section-title">五大核心功能模块</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>数据整合与行为追踪</h3>
                    <p>多账户聚合，自动为每一笔交易打上行为标签，追踪您的投资行为模式。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔍</div>
                    <h3>行为偏差诊断与可视化</h3>
                    <p>通过偏差仪表盘和雷达图，直观展示您的主要行为偏差类型和严重程度。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💡</div>
                    <h3>个性化洞察与改善建议</h3>
                    <p>定期生成行为报告，提供情景感知警示和针对性的学习资源。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔄</div>
                    <h3>模拟与改进助手</h3>
                    <p>提供"理性训练"沙盘和投资决策框架，帮助您在安全环境中改善投资行为。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌐</div>
                    <h3>普惠与社区功能</h3>
                    <p>匿名基准对比和知识库，让您在投资者社区中学习成长。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="about">
        <div class="container">
            <h2 class="section-title">关于 I投E行</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>
                        I投E行不仅仅是一个分析工具，更是一位陪伴您成长、提升投资理性的"行为教练"，
                        实现从"诊断"到"治愈"的完整闭环，真正践行金融科技的普惠使命。
                    </p>
                    <p>
                        我们的平台通过连接模拟交易数据（或脱敏后的真实交易数据），
                        利用先进算法识别用户的交易行为模式，诊断可能存在的认知偏差，
                        并提供个性化的"理性提示"和投资教育。
                    </p>
                </div>
                <div class="about-stats">
                    <div class="stat">
                        <div class="stat-number">5+</div>
                        <div class="stat-label">行为偏差维度</div>
                    </div>
                    <div class="stat">
                        <div class="stat-number">100%</div>
                        <div class="stat-label">个性化分析</div>
                    </div>
                    <div class="stat">
                        <div class="stat-number">0</div>
                        <div class="stat-label">数据隐私风险</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h3>I投E行</h3>
                    <p>投资行为诊断与纠正平台</p>
                </div>
                <div class="footer-links">
                    <a href="#">隐私政策</a>
                    <a href="#">使用条款</a>
                    <a href="#">联系我们</a>
                </div>
            </div>
            <div class="footer-copyright">
                <p>&copy; 2025 I投E行. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 导入JavaScript模块 -->
    <script src="js/main.js"></script>
    <script src="js/auth.js"></script>
    <script>
        // 演示雷达图
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('demoRadarChart').getContext('2d');
            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['过度自信', '损失厌恶', '处置效应', '确认偏误', '羊群效应'],
                    datasets: [{
                        label: '行为偏差示例',
                        data: [65, 59, 80, 45, 70],
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
                    }]
                },
                options: {
                    scales: {
                        r: {
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0,
                            suggestedMax: 100
                        }
                    }
                }
            });

            // 按钮事件
            document.getElementById('heroRegisterBtn').addEventListener('click', function() {
                window.location.href = 'register.html';
            });
            
            document.getElementById('heroLearnMoreBtn').addEventListener('click', function() {
                document.getElementById('features').scrollIntoView({ behavior: 'smooth' });
            });
        });
    </script>
</body>
</html>